<script setup lang="ts">
  import { reactive } from 'vue';
  import { defineProps } from 'vue';
  import {
    getbianglist,
    getcompanydetail,
    getzhizlist,
  } from '@/api/enterlibery';
  let data = '';
  const detail = ref(undefined);
  const route = useRoute();
  const zzlist = ref();
  const bglist = ref();
  onMounted(() => {
    getcompanydetail({
      company_id: route.query.id,
    }).then((res) => {
      detail.value = res.data;
      data = [
        {
          label: '曾用名',
          value: detail.value.cymc,
        },
        {
          label: '英文名称',
          value: detail.value.ywmc,
        },
        {
          label: '登记机关',
          value: detail.value.djjg,
        },
        {
          label: '网址',
          value: detail.value.gswz,
        },
        {
          label: '邮箱',
          value: detail.value.gsyx,
        },
        {
          label: '经营状态',
          value: '存续',
        },
        {
          label: '法定代表人',
          value: detail.value.frdb,
        },
        {
          label: '企业类型',
          value: detail.value.qylx,
        },
        {
          label: '成立日期',
          value: detail.value.clrq,
        },
        {
          label: '营业期限',
          value: detail.value.yyqx,
        },
        {
          label: '核准日期',
          value: detail.value.hzrq,
        },
        {
          label: '统一社会信用代码',
          value: detail.value.tyshxydm,
        },

        {
          label: '纳税人识别号',
          value: detail.value.nsrsbh,
        },
        {
          label: '组织机构代码',
          value: detail.value.zzjgdm,
        },
        {
          label: '工商注册号',
          value: detail.value.gszch,
        },
        {
          label: '注册资本',
          value: detail.value.zczb,
        },
        {
          label: '实缴资本',
          value: detail.value.sjzb,
        },

        {
          label: '纳税人资质',
          value: detail.value.nsrzz,
        },
        {
          label: '人员规模',
          value: detail.value.rygm,
        },
        {
          label: '注册地址',
          value: detail.value.zcdz,
        },
        {
          label: '经营范围',
          span: 24,
          value: detail.value.jyfw,
        },
      ];
      getzhizlist({
        company_id: route.query.id,
      }).then((resa) => {
        zzlist.value = resa.data.list;
        zzlist.value.forEach((item, index) => {
          zzlist.value[index].index = index + 1;
        });
      });
      getbianglist({
        company_id: route.query.id,
      }).then((resa) => {
        bglist.value = resa.data.list;
        bglist.value.forEach((item, index) => {
          bglist.value[index].index = index + 1;
        });
      });
    });
  });

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
    },
    {
      title: '资质',
      dataIndex: 'qual_title',
      align: 'center',
    },
    {
      title: '级别',
      dataIndex: 'qual_level',
      align: 'center',
    },
    {
      title: '认定部门',
      dataIndex: 'qual_dept',
      align: 'center',
    },
    {
      title: '年份',
      dataIndex: 'qual_year',
      align: 'center',
    },
    {
      title: '文件来源',
      dataIndex: 'qual_file_name',
      slotName: 'source',
      align: 'center',
    },
  ];
  const columns1 = ref([
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
    },
    {
      title: '变更日期',
      dataIndex: 'change_date',
      align: 'center',
    },
    {
      title: '变更项目',
      dataIndex: 'change_item',
      align: 'center',
    },
    {
      title: '变更前',
      dataIndex: 'change_before',
      align: 'center',
    },
    {
      title: '变更后',
      dataIndex: 'change_after',
      align: 'center',
      width: 400,
    },
  ]);
</script>

<template>
  <div class="companyPage" v-if="detail">
    <div class="companyHead">
      <div class="image"><icon-bar-chart class="icon" /></div>
      <div class="companyHeadTitle">
        <div class="title">
          {{ detail.gsmc }}
          <div class="tag">存续</div>
        </div>
        <div class="tags">
          <!-- 行业-->
          <div class="">
            <a-tag
              v-for="(item, index) in detail.hy"
              :key="index"
              class="tagitem"
              color="arcoblue"
              >{{ item }}</a-tag
            >
          </div>
          <!-- 行业-->
          <div>
            <a-tag
              v-for="(item, index) in detail.qylx"
              :key="index"
              class="tagitem"
              color="purple"
              >{{ item }}</a-tag
            >
          </div>
        </div>
        <div class="des">
          {{ detail.gsjj }}
        </div>
      </div>
    </div>
    <div class="companyHead companyList">
      <div class="tabs"></div>
      <div class="tab-item" v-if="data">
        <a-descriptions size="large" :data="data" title="工商信息" bordered />
      </div>
      <div>
        <a-descriptions
          class="qiye"
          :title="`企业资质 ${zzlist.length}`"
          bordered
        />
        <a-table bordered :columns="columns" :data="zzlist">
          <!-- 定义文件来源列的模板 -->
          <template #source="{ column, record }">
            <icon-link :style="{ color: '#165DFF' }" /><a-link
              target="_blank"
              :href="record.qual_url"
            >
              {{ record.qual_file_name }}</a-link
            >
          </template>
        </a-table>
      </div>
      <div class="tab-item" style="margin-top: 10px">
        <a-descriptions
          class="qiye"
          :title="`变更记录 ${bglist.length}`"
          bordered
        />
        <a-table bordered :columns="columns1" :data="bglist"> </a-table>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
  .companyPage {
    background: #f2f3f5;
  }
  .companyHead {
    padding: 1.5rem;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    flex-direction: row;
    .logo {
      width: 50px;
      border-radius: 5px;
    }
    .companyHeadTitle {
      margin-left: 15px;
      font-size: 20px;
      .tag {
        font-size: 14px;
        padding: 0 8px;
        border-radius: 2px;
        line-height: 22px;
        border: 1px solid #56b85c;
        color: #2cab3a;
        display: inline-block;
        font-weight: normal;
        margin-left: 10px;
      }
      .danger {
        border: 1px solid red;
        color: red;
      }
      font-weight: bold;
      .title {
        display: flex;
        align-items: center;
      }
    }
  }
  .tags {
    > div {
      margin-top: 10px;
      .tagitem {
        margin-right: 10px;
      }
    }
  }
  .des {
    background: #f7faff;
    width: 70vw;
    margin-top: 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: normal;
    line-height: 25px;
    padding: 15px;
  }
  .companyList {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    .tab-item {
      margin-bottom: 40px;
    }
  }
  ::v-deep .arco-descriptions-item-label {
    background: #f5f7ff;
  }
  ::v-deep .qiye .arco-descriptions-body {
    display: none;
  }
  ::v-deep .arco-table-th {
    background: #f5f7ff;
  }
  ::v-deep .arco-table-cell {
    padding: 8px 16px;
  }
  .image {
    height: 70px;
    width: 70px;
    border-radius: 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: #73a2e6;
    .icon {
      color: #ffffff;
      font-size: 45px;
    }
  }
</style>
